<template>
  <div class="categoryList">
    <van-nav-bar
      title="分类"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-tabs v-model="active">
      <van-tab v-for="(item, index) in cateList" :key="index" :title="item.name" class="tabCat">
       <h3 class="title_h3">{{item.name}}</h3>
       <p class="title_p">{{item.front_name}}</p>
       <van-grid :border="true" :column-num="2">
        <van-grid-item v-for="(item2, index2) in item.plist" :key="index2" class="grid_item" :to="'/product/'+item2.id">
          <van-image width="100" height="100" :src="item2.list_pic_url"/>
          <h2>{{item2.name}}</h2>
          <h3>￥{{item2.retail_price}}</h3>
        </van-grid-item>
      </van-grid>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  props: ['id'],
  data () {
    return {
      active: 0,
      cateList: []
    }
  },
  async created () {
    const { data: res } = await this.$http.get('goods/category', { params: { id: this.id } })
    // console.log(res.data)
    this.cateList = res.data.brotherCategory
    this.cateList.forEach(async item => {
      item.plist = await this.getList(item.id, 1, 20)
      this.$forceUpdate()
    })
  },
  methods: {
    async getList (id, page, size) {
      const { data: res } = await this.$http.get('goods/list', { parans: { id, page, size } })
      // console.log(res.data.data)
      return res.data.data
    },
    onClickLeft () {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="less" scoped>
.tabCat{
  text-align: center;
}
.title_h3{
  font-size: .16rem;
  padding: .11rem 0;
}
.title_p{
  font-size: .12rem;
}
.grid_item{
  text-align: center;
}
.grid_item h2{
  font-size: .16rem;
  padding: .05rem 0;
}
.grid_item h3{
  color: red;
  font-size: .12rem;
}
</style>
